<template>
  <div class="goodsCardItem" v-if="goodsInfo">
    <el-container>
      <el-aside width="40px">
        <el-checkbox v-model="isChooseItem" size="large" />
      </el-aside>
      <el-main>
        <el-image style="width: 102px; height: 150px" :src="goodsInfo.photos" />
        <div class="goods-information">
          <h2 class="goods-name">{{ goodsInfo.name }}</h2>
          <p class="goods-description">描述：{{ goodsInfo.descInfo }}</p>
          <div class="goods-price">单价: ￥{{ goodsInfo.price }}</div>
        </div>
        <div class="calc-information">
          <div class="goods-price" style="color: #e91e63">
            <span style="color: black">合计:</span>
            ￥{{ totalPrice }}
          </div>
          <el-input-number v-model="num" :min="1" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { getGoodsInfo } from '@/api/goods'
import { computed, ref, watch } from 'vue'

const props = defineProps({
  good: Object
})

const emit = defineEmits(['changeChoose', 'changeNum'])

// 商品基本信息
const goodsInfo = props.good

// 是否选择
const isChooseItem = ref(goodsInfo.isChoose == 1 ? true : false)

watch(isChooseItem, (newValue, oldValue) => {
  emit('changeChoose', { shopId: goodsInfo.shopId, isChoose: newValue })
})

// 选择数量
const num = ref(goodsInfo.num)

watch(num, (newValue, oldValue) => {
  emit('changeNum', { shopId: goodsInfo.shopId, num: newValue })
})

const getGoodsInformation = async () => {
  const res = (await getGoodsInfo(goodsInfo.goodsId)).data
  goodsInfo.value = res.data
}

getGoodsInformation()

// 计算单个物品总价
const totalPrice = computed(() => {
  return (num.value * goodsInfo.price).toFixed(2)
})
</script>

<style scoped>
.goodsCardItem {
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin: 10px 0 0 10px;
}

.goodsCardItem:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.el-aside {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-main {
  display: flex;
}

/* 商品信息 */
.goods-information {
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}

.goods-name {
  font-size: 16px;
  margin: 0 0 8px;
  color: #333;
}

.goods-description {
  font-size: 14px;
  margin: 4px 0;
  color: #999;
}

.goods-price {
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 112, 15);
  margin: 10px 0 10px 0;
}

/* 计算信息 */
.calc-information {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: flex-end;
  margin-left: 500px;
}
</style>
